<template>
  <div class="blog">
    <el-row>
      <el-form
        ref="queryParams"
        :model="queryParams"
        label-width="80px"
        label-position="left"
      >
        <el-form-item label="博客标题">
          <el-col :span="4">
            <el-input
              v-model="queryParams.title"
              placeholder="请输入博客标题"
            />
          </el-col>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="query-btn">
      <el-button type="primary" @click="handleAdd()">添加博客</el-button>
    </el-row>

    <el-row>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%"
        border
      >
        <el-table-column
          prop="_id"
          label="编号"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="sort" label="分类" :formatter="sortMatter" />
        <el-table-column
          prop="content"
          label="内容"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="state" label="状态" :formatter="stateMatter" />
        <el-table-column prop="type" label="文章类型" :formatter="typeMatter" />
        <el-table-column
          prop="createTime"
          label="创建时间"
          :formatter="createTimeMatter"
        />
        <el-table-column
          prop="updateTime"
          label="修改时间"
          :formatter="updateTimeMatter"
        />
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.row)"
            >
              修改
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDel(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </el-row>
    <el-dialog
      :close-on-click-modal="false"
      :title="dialog.title"
      :visible.sync="dialog.open"
      width="1400px"
      top="5vh"
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="80px"
        :gutter="20"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="标题" prop="title">
              <el-input
                v-model="form.title"
                type="text"
                placeholder="请输入标题"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="作者" prop="author">
              <el-input
                v-model="form.author"
                type="text"
                placeholder="请输入作者"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="分类" prop="sort">
              <el-select
                v-model="form.sort"
                placeholder="请选择分类"
                style="width: 100%"
              >
                <el-option
                  v-for="item in sortOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="文章类型" prop="type">
              <el-select
                v-model="form.type"
                placeholder="请选择分类"
                style="width: 100%"
              >
                <el-option
                  v-for="item in typeOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="form.state">
                <el-radio
                  v-for="item in stateOptions"
                  :key="item.value"
                  :label="item.value"
                >
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <WangEditor v-model="detail" :is-clear="isClear" @change="change" />
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const sortOptions = [
  {
    value: 1,
    label: 'Vue'
  },
  {
    value: 2,
    label: 'React'
  },
  {
    value: 3,
    label: 'Angular'
  },
  {
    value: 4,
    label: 'Html'
  },
  {
    value: 5,
    label: 'Css'
  },
  {
    value: 6,
    label: 'JavaScript'
  },
  {
    value: 7,
    label: 'TypeScript'
  },
  {
    value: 8,
    label: 'JQuery'
  },
  {
    value: 9,
    label: 'Node.js'
  },
  {
    value: 10,
    label: 'Webpack'
  },
  {
    value: 11,
    label: '小程序'
  },
  {
    value: 12,
    label: 'Uniapp'
  },
  {
    value: 13,
    label: 'Git'
  },
  {
    value: 14,
    label: 'Svn'
  },
  {
    value: 15,
    label: 'Java'
  },
  {
    value: 16,
    label: '其它'
  }
]
const stateOptions = [
  {
    label: '公开',
    value: 1
  },
  {
    label: '私密',
    value: 2
  }
]
const typeOptions = [
  {
    value: 1,
    label: '原创'
  },
  {
    value: 2,
    label: '转载'
  },
  {
    value: 3,
    label: '翻译'
  }
]
import Pagination from '@/components/Pagination'
import WangEditor from '@/components/WangEditor'
import { blogAdd, blogEdit, blogGet, blogById, blogDel } from '@/api/blog'
export default {
  name: 'BlogManage',
  components: { WangEditor, Pagination },
  data() {
    return {
      btnType: 'add',
      isClear: false,
      // 富文本的值
      detail: '',
      // 遮罩层
      loading: true,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 10
      },
      // 总条数
      total: 0,
      // 列表数据
      tableData: [],
      // 弹窗参数
      dialog: {
        title: '新增博客',
        open: false
      },
      // 表单
      form: {},
      rules: {
        // title author sort type state
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        sort: [{ required: true, message: '请选择分类', trigger: 'change' }],
        type: [{ required: true, message: '请选择类型', trigger: 'change' }],
        author: [{ required: true, message: '作者不能为空', trigger: 'blur' }],
        state: [{ required: true, message: '请选择状态', trigger: 'change' }]
      },
      // 分类字典
      sortOptions: sortOptions,
      // 状态字典
      stateOptions: stateOptions,
      // 文章类型:
      typeOptions: typeOptions
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 分类
    sortMatter(item) {
      const sortObj = {
        1: 'Vue',
        2: 'React',
        3: 'Angular',
        4: 'Html',
        5: 'Css',
        6: 'JavaScript',
        7: 'TypeScript',
        8: 'JQuery',
        9: 'Node.js',
        10: 'Webpack',
        11: '小程序',
        12: 'Uniapp',
        13: 'Git',
        14: 'Svn',
        15: 'Java',
        16: '其它'
      }
      return sortObj[item.sort]
    },
    // 状态字典
    stateMatter(item) {
      const stateObj = {
        1: '公开',
        2: '私密'
      }
      return stateObj[item.state]
    },
    // 类型字典
    typeMatter(item) {
      const typeObj = {
        1: '原创',
        2: '转载',
        3: '翻译'
      }
      return typeObj[item.type]
    },
    createTimeMatter(item) {
      return item.createTime.replace(/T/, ' ').replace(/\..+/, '')
    },
    updateTimeMatter(item) {
      return item.createTime.replace(/T/, ' ').replace(/\..+/, '')
    },
    // 富文本改变
    change(val) {
      this.form.content = val
    },
    // 获取列表
    async getList() {
      this.loading = true
      const data = await blogGet(this.queryParams)
      if (data.code === 1) {
        this.tableData = data.data
        this.total = data.total
        this.loading = false
      }
    },
    // 新增按钮
    handleAdd() {
      this.reset()
      this.dialog.title = '新增博客'
      this.dialog.open = true
      this.btnType = 'add'
    },
    // 修改
    async handleEdit(row) {
      this.reset()
      this.dialog.title = '修改博客'
      this.dialog.open = true
      this.btnType = 'edit'
      const data = await blogById(row._id)
      if (data.code === 1) {
        this.form = data.data
        this.detail = data.data.content
      }
    },
    // 删除
    async handleDel(row) {
      this.$confirm('是否确认删除选中的博客?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function() {
          return blogDel(row._id)
        })
        .then(() => {
          this.getList()
          this.msgSuccess('删除成功')
        })
        .catch(function() {
          this.msgError('删除失败')
          this.getList()
        })
    },
    // 提交表单
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          // 编辑
          if (this.btnType === 'edit') {
            const data = await blogEdit(this.form)
            if (data.code === 1) {
              this.msgSuccess('修改成功')
              this.dialog.open = false
              this.getList()
            } else {
              this.msgError('修改失败')
            }
          } else {
            // 新增
            const data = await blogAdd(this.form)
            if (data.code === 1) {
              this.msgSuccess('添加成功')
              this.dialog.open = false
              this.getList()
            } else {
              this.msgError('添加失败')
            }
          }
        }
      })
    },
    // 重置
    reset() {
      this.form = {}
      this.detail = ''
    },
    // 取消按钮
    cancel() {
      this.dialog.open = false
      this.reset()
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style scoped lang="scss">
.blog {
  margin: 30px;
}
.query-btn {
  margin-bottom: 20px;
}
</style>
